<template>
	<view class="adrress_manage_layoout">
		<view class="header_search">
			<image class="search_img" src="../../static/imgs/logo.jpg" mode=""></image>
			<uni-search-bar clearButton="auto" placeholder="搜索地址/姓名/电话" cancelButton="none" @confirm="search"
				@input="input" :radius="100"></uni-search-bar>
		</view>

		<view class="data_content">
			<!-- <uv-empty v-if="addressList.length<1" mode="search" class="empty_layout" textSize="24" iconSize="120">
				</uv-empty> -->
			<view  class="data_scroll_layout">
				<!-- <scroll-view scroll-y="true" v-else> -->
				<uni-card :is-shadow="true" class="card_layout" v-for="item in 3">
					<template v-slot:title>
						<view class="card_title_layout">
							<view class="title_name">
								<text>浪味仙</text>
							</view>
							<view class="title_phone">
								<text>1505818254848</text>
							</view>
						</view>
					</template>
					<view class="address_content">
						<text>浙江省杭州市余杭区西溪蓝海二栋2003</text>
					</view>
					<view slot="actions" class="card-actions">
						<view class="card-actions-item" @click="deleteAddress">
							<button style="color: #CD5C5C;" plain size="mini" type="default">删除</button>
						</view>
						<view class="card-actions-item" @click="eaditAddress">
							<button style="color: #FFD700;" plain size="mini" type="default">修改</button>
						</view>
					</view>
				</uni-card>
			</view>


		</view>
		<!-- 添加地址按钮 -->
		<view class="addAddressLayout">
			<uv-button @click="openPop" iconColor="#FFF" style="height: 200rpx;" text="添加地址" icon="plus" size="large"
				color="#FAC526"></uv-button>
		</view>

		<view class="popup_layout">
			<uni-popup class="popup__content" ref="popupRef" type="bottom" border-radius="10px 10px 0 0"
				background-color="#FFF">
				<uni-forms class="form_layout" ref="formRef" :modelValue="formData" label-width="95" :border="true">
					<uni-forms-item class="items_layout" label="收货人姓名" name="name" prop>
						<input type="text" placeholder="请输入姓名" v-model="formData.name"></input>
					</uni-forms-item>
					<uni-forms-item class="items_layout" label="收货人电话" name="phoneNumber">
						<input type="number" placeholder="请输入电话" v-model="formData.phoneNumber"></input>
					</uni-forms-item>
					<uni-forms-item class="items_layout" label="省市区" name="country">
						<uni-data-picker :localdata="princesList" popup-title="请选择省市区" @change="onchange"
							@popupclosed="popClose"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item class="items_layout" label="详细地址" name="address">
						<input type="text" placeholder="请输入详细地址" v-model="formData.address"></input>
						<uni-icons class="detail_icon" type="location" size="33" color="#FAC526"
							@click="getLocation"></uni-icons>
					</uni-forms-item>

					<button type="primary" @click="submitForm">添加地址</button>
				</uni-forms>
			</uni-popup>
		</view>

	</view>
	<!-- <SafeAreaInsetsComponent></SafeAreaInsetsComponent> -->
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';

	const popupRef = ref(null)
	const formRef = ref(null)

	const formData = ref({
		name: '',
		phoneNumber: null,
		country: '',
		address: ''
	})

	const princesList = ref([])

	const addressList = ref([])

	// 弹出pop框
	const showPop = ref(false)
	const openPop = () => {
		showPop.value = !showPop.value
		popupRef.value.open()
		getPrinceData()
	}
	// 关闭弹出框
	const popClose = (e) => {
		console.log(e);
	}

	const onchange = (e) => {
		formData.value.country = e.detail.value.map(item => item.text).join('')
		console.log('formData.value:', formData.value);
	}


	// 读取本地的省市数据
	const getPrinceData = () => {
		uni.request({
			url: '/static/data/regions2.json',
			success: (res) => {
				const {
					statusCode,
					data
				} = res
				if (statusCode === 200) {
					princesList.value = data
				}
			},
			fail: (err) => {
				console.error(err)
			}
		})
	}

	//获取定位，位置信息
	const getLocation = () => {
		uni.chooseLocation({
			success: function(res) {
				const {
					address,
					name
				} = res
				formData.value.address = name + address
			}
		});
	}

	//提交表单
	const submitForm = () => {
		addressList.value.push(formData.value)
		console.log(addressList.value);
	}
</script>

<style lang="scss" scoped>
	.adrress_manage_layoout {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		.header_search {
			width: 85%;
			display: flex;
			align-items: center;

			.search_img {
				width: 70rpx;
				height: 70rpx;
			}

			:deep(.uni-searchbar) {
				height: 70rpx;
				width: 450rpx;
			}
		}

		.data_content {
			display: flex;
			flex: 1;
			position: relative;

			.data_scroll_layout {
				width: 100%;
				.card_layout {
					.card_title_layout {
						height: 60rpx;
						display: flex;
						align-items: center;
						.title_name {
							height: 100%;
							font-size: 38rpx;
							font-weight: 1000;
							margin-right: 15rpx;
							display: flex;
							align-items: center;
						}
						.title_phone{
							height: 100%;
							font-size: 30rpx;
							color: $text-font-color-3;
							display: flex;
							align-items: center;
						}
					}
					.address_content{
						display: flex;
						align-items: center;
						height: 80rpx;
						font-size: 28rpx;
						line-height: 0.9em;
						font-weight: 400;
						color: #000;
						border-bottom: 1rpx solid #ccc;
					}
					.card-actions{
						display: flex;
						justify-content: right;
						.card-actions-item{
							margin: 20rpx 10rpx 0 0;
						}
					}
				}
			}


			.empty_layout {
				position: absolute;
				left: calc(50% - 200rpx);
				top: calc(50% - 270rpx);
				width: 400rpx;
				height: 400rpx;

			}
		}

		.addAddressLayout {
		
		}

		:deep(.uv-action-sheet) {
			padding: 0 20rpx;

			:deep(.uv-action-sheet__header) {
				font-size: 43rpx;
			}
		}

		.popup_layout {
			width: 100%;

			.popup__content {
				height: 800rpx;

				.form_layout {
					height: auto;
					padding: 20rpx;

					& .items_layout {
						height: 100rpx;
						align-items: center;

						:deep(.uni-forms-item__content) {
							display: flex;
							flex-direction: row;
							align-items: center;

							.uni-input-input {
								width: 500rpx;
							}

							.detail_icon {
								position: absolute;
								right: 10rpx;
							}
						}
					}
				}

			}
		}
	}
</style>